<template>
  <div class="status-infor-container">
    <el-row :gutter="20">
        <el-col :span="8">
            <p class="deviceInfor" :title="deviceInforData.unitCode">
                警号:<span>{{deviceInforData.siren}}</span>
            </p>
        </el-col>
        <el-col :span="8">
            <p class="deviceInfor" :title="deviceInforData.unitCode">
            姓名:<span>{{deviceInforData.userName}}</span>
             </p>
        </el-col>
        <el-col :span="8">
            <p class="deviceInfor" :title="deviceInforData.unitCode">
                单位编号:<span >{{deviceInforData.unitCode}}</span>
             </p>
        </el-col>    
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="8">
            <p class="deviceInfor" :title="deviceInforData.productSerialNub">
                产品序号:<span>{{deviceInforData.productSerialNub}}</span>
             </p>
        </el-col>
        <el-col :span="8">
            <p class="deviceInfor" :title="deviceInforData.productNub">
                产品型号:<span >{{deviceInforData.productNub}}</span>
            </p>
        </el-col>
        <el-col :span="8">
            <p class="deviceInfor" :title="deviceInforData.saveRoute">
                保存路径:<span >{{deviceInforData.saveRoute}}</span>
             </p>
        </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="24">
            <p class="deviceInfor" :title="deviceInforData.uploadTime">
                上传时间:<span>{{deviceInforData.uploadTime}}</span>
            </p>
        </el-col>
    </el-row>
    <div v-if="deviceInforData.Isuploading" style="margin-top:20px;margin-bottom:20px">
        <el-progress :text-inside="true" :stroke-width="18" :percentage="80" status="success"></el-progress>
    </div>
  </div>
</template>
<script>
export default {
  props: {
      deviceInfor: {
        type: Object,
        required: true
      }
  },
  computed: {
    deviceInforData() {
      return this.deviceInfor
    }
  }
}
</script>
<style lang="stylus" scoped>
.status-infor-container
    border-radius 5px
    border 1px solid #909399
    box-shadow 2px 2px 3px #C0C4CC
    padding 20px 20px 0px 
    height 200px
    .deviceInfor
        white-space nowrap
        text-overflow ellipsis 
        overflow hidden 
            
@media screen and (min-width: 1200px)
    .status-infor-container
        font-size 14px
        .deviceInfor span
            margin-left 5px
@media screen and (min-width: 992px) and (max-width: 1200px )
    .status-infor-container
        font-size 12px
        .deviceInfor span
            margin-left 2px
@media screen and (min-width: 768px) and (max-width: 992px )
    .status-infor-container
        font-size 10px
        .deviceInfor span
            margin-left 1px

@media screen and (max-width: 768px )
    .status-infor-container
        font-size 10px
        .deviceInfor span
            margin-left 1px
</style>


